<template>
  <div class="info">
    <div class="info-box">
      <div class="info-description">
        <p class="info-words">
          <span class="info-word simple">简约</span>
          <span class="info-word easy">好用</span>
          <span class="info-word free">免费</span>
        </p>
        <p class="info-slogan">腾讯问卷为您提供专业调研服务</p>
      </div>
      <div class="info-contact">
        <div class="info-issue">
          任何建议和问题随时
          <a class="info-feedback" href="">吐个槽</a>
        </div>
        <div class="info-contacts">
          官方邮箱：
          <a class="info-official-con" href="">wj@tencent.com</a>

          <div class="info-contacts">
            官方微博：
            <a class="info-official-con" href="">腾讯问卷</a>
          </div>

          <div class="info-contacts">
            官方QQ群：
            <a class="info-official-con" href="">365694489</a>
          </div>

          <div lass="info-contacts">
            客服QQ：
            <a class="qq-box" href="">在线咨询
            </a>
          </div>
        </div>
      </div>

      <div class="info-wx">
        <img class="info-qrcode" src="../assets/wx_public_qr_code.png" alt="" />
        <p class="info-scan">扫描关注微信公众号</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.info {
  background-color: #f5f5f5;
  padding: 35px 0 20px;
}
.info-box {
  display: flex;
  justify-content: space-between;
  width: 1040px;
  padding: 0 20px;
  box-sizing: border-box;
  margin: 0 auto;
}
.info-words {
  font-size: 20px;
  color: #58a6e7;
}
.info .info-description .info-word.simple {
  background: url(https://cdn.ur.qq.com/image/icon_simple.png?v=1.9.80) no-repeat;
  padding: 15px 0 15px 60px;
  margin-right: 20px;
}
.info .info-description .info-word.easy {
  background: url(https://cdn.ur.qq.com/image/icon_easy.png?v=1.9.80) no-repeat;
  padding: 15px 0 15px 60px;
  margin-right: 20px;
}
.info .info-description .info-word.free {
  background: url(https://cdn.ur.qq.com/image/icon_free.png?v=1.9.80) no-repeat;
  padding: 15px 0 15px 60px;
  margin-right: 20px;
}
.info-description {
  width: 375px;
  height: 108px;
}
.info-slogan {
  margin-top: 38px;
  color: #999;
  font-size: 22px;
}
.info-contact{
  width: 230px;
  height: 144px;
  margin-top: -4px;
  margin-left: 80px;
  margin-right: 92px;
}
.info-issue {
  margin-bottom:20px;
  color: #333;
}
.info-feedback {
  color: #58a6e7;
  margin-left: 5px;
  text-decoration: none;
}
.info-contacts {
  color: #999;
  font-size: 13px;
  line-height: 190%;
}
.info-official-con {
  text-decoration: none;
  color: #333;
}
.info-official-con:hover {
  color: #58a6e7;
}
.qq-box {
  text-decoration: none;
  background: #fff;
  color: #1e2330;
  // width: 94px;
  // height: 28px;
  border:1px solid #dadee7;
  display: inline-block;
  text-align: center;
  line-height: 28px;
  border-radius: 2px;
  background: url(https://bqq.gtimg.com/qidian/src/wpa/dist/4.1.0/images/1_1_1.png)no-repeat;
  background-position: 10px;
  padding-left: 32px;
  padding-right: 10px;
}
// .info-btn-text {
//   padding-left: 22px;
// }
.info-wx{
  width: 130px;
  height: 118px;
  text-align: center;
  margin-top: -12px;
}
.info-qrcode {
  width: 100px;
  height: 100px;
}
.info-scan {
  color: #999;
  font-size: 13px;
}
</style>
